<template>
  <!-- 权限管理-角色管理 -->
  <div class="role-management">
    <a-card class="query" title="查询">
      <div class="input-box">
        <div class="item">
          <div class="text">角色名称</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">权限字符</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">状态</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item item-time">
          <div class="text">创建时间</div>
          <a-range-picker class="input picker" show-time />
        </div>
        <div class="item">
          <a-button class="button">重置</a-button>
          <a-button type="primary">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="list" title="列表">
      <template #extra>
        <div class="button-box">
          <a-button class="button" type="primary" @click="clickAddUser"
            >新增</a-button
          >
          <a-button class="button">修改</a-button>
          <a-button class="button">删除</a-button>
          <a-button class="button">导出</a-button>
        </div>
      </template>
      <a-table class="table" :columns="columns" :data-source="tableData">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'id5'">
            <a-switch :checked="record.id6"></a-switch>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <span>修改</span>
              <span>删除</span>
              <span>数据权限</span>
              <span>分配用户</span>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
    <AddRoleModal
      :open="openAddRoleModal"
      @cancel="cancelAddRoleModal"
    ></AddRoleModal>
  </div>
</template>
<script setup lang="ts">
// 引入组件
import AddRoleModal from './modal/AddRoleModal.vue'
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
import { FolderOutlined, SearchOutlined } from '@ant-design/icons-vue'
const props = defineProps({})
const emits = defineEmits([])
// 自定义状态
const columns = [
  { title: '角色编号', dataIndex: 'id1' },
  { title: '角色名称', dataIndex: 'id2' },
  { title: '权限字符', dataIndex: 'id3' },
  { title: '显示顺序', dataIndex: 'id4' },
  { title: '状态', dataIndex: 'id5' },
  { title: '创建时间', dataIndex: 'id6' },
  { title: '操作', dataIndex: 'operation' },
] //列表配置
const tableData = [
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '1',
    id2: '超级管理员',
    id3: 'admin',
    id4: '1',
    id5: true,
    id6: '2025-03-28 12:12:30',
  },
] //列表数据
const openAddRoleModal = ref(false) //新增用户对话框状态
onMounted(() => {})
// 自定义方法
//点击树节点
const clickTreeNode = (
  selectedKeys,
  { selected: bool, selectedNodes, node, event }
) => {
  listTitle.value = node.title
}
//点击新增用户
const clickAddUser = () => {
  openAddRoleModal.value = true
}
//关闭新增用户对话框
const cancelAddRoleModal = () => {
  openAddRoleModal.value = false
}
</script>
<style lang="less" scoped>
.role-management {
  .query {
    margin-bottom: (20 / @vh);
    .input-box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        display: flex;
        align-items: center;
        width: 20%;
        &:first-child {
          margin-bottom: (20 / @vh);
        }
        .text {
          margin-right: (10 / @vw);
          text-align: right;
        }
        .input {
          flex: 1;
        }
        .picker {
          width: (300 / @vw);
        }
        .button {
          margin-right: (10 / @vw);
        }
      }
      .item-time {
        width: 30%;
      }
    }
  }
  .list {
    .button-box {
      .button {
        margin-right: (10 / @vw);
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .table {
      .operation {
        span {
          margin-right: (10 / @vw);
          color: @tc;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
